<template>
  <div class="article-list-body container" :style="{ width: 1200 + 'px' }">
    <div v-loading.fullscreen.lock="loading" class="content">
      <h1 style="text-align: center">{{ articleInfo?.title }}</h1>
      <div class="author">
        <span>{{ articleInfo?.authorName }}</span>
        <span>
          {{
            articleInfo?.created
              ? moment(articleInfo?.created).format("YYYY-MM-DD HH:mm:ss")
              : ""
          }}
        </span>
      </div>
      <Editor readOnly :modelValue="articleInfo?.content" />
    </div>
    <el-affix position="bottom" :offset="0">
      <div class="bottom">
        <div class="left" @click="view" style="cursor: pointer">
          <!-- <el-avatar :size="50" :src="articleInfo.image" /> -->
          <div style="font-weight: 600">{{ articleInfo.authorName }}</div>
        </div>
        <div class="right">
          <div style="cursor: pointer" @click="support">
            <img
              v-if="!flag"
              src="@/assets/tb/icon.png"
              style="width: 30px; height: 30px"
            />
            <img
              v-else
              src="@/assets/tb/icon-copy.png"
              style="width: 30px; height: 30px"
            />
          </div>
          <!-- color: !flag ? '' : '#FC5531' -->
          <span style="margin: 0 20px 0 5px">{{ articleInfo.support }}</span>
          <div style="display: flex; align-items: center">
            <img
              @click="drawer = true"
              src="@/assets/tb/review.png"
              style="width: 30px; height: 30px; cursor: pointer"
            />
            <span style="margin: 0 20px 0 5px">{{ list?.length }}</span>
          </div>
        </div>
      </div>
    </el-affix>
    <el-drawer v-model="drawer" :title="'评论' + ' ' + list?.length">
      <div class="commit">
        <div style="width: 32px; height: 32px">
          <el-avatar :size="32" :src="loginUserInfo?.image" />
        </div>
        <el-input
          v-model="textarea"
          :autosize="{ minRows: 10, maxRows: 10 }"
          type="textarea"
          show-word-limit
          maxlength="1000"
        />
        <div class="btn">
          <el-button type="danger" style="width: 80px" round @click="onConfirm"
            >评论</el-button
          >
        </div>
      </div>

      <div>
        <div
          class="list"
          v-for="(item, index) in list"
          :key="index"
          style="cursor: pointer"
        >
          <div style="width: 32px; height: 32px" @click="avaClick(item)">
            <el-avatar :size="32" :src="item.image" />
          </div>
          <div class="text">
            <div>
              {{ item.username }}
              {{
                item.created
                  ? moment(item.created).format("YYYY-MM-DD HH:mm:ss")
                  : ""
              }}
            </div>
            <div>{{ item.content }}</div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

import Editor from "@/components/Editor/index.vue";
import moment from "moment";
import {
  getOneArticle,
  agree,
  getComments,
  putComments,
} from "@/api/article.js";
const router = useRouter();
const { proxy } = getCurrentInstance();
const store = useStore();
const getFormatTime = (arr) => {
  arr = arr.map((item) => {
    return (item = item < 10 ? "0" + item : item);
  });
  return (
    arr[0] +
    "-" +
    arr[1] +
    "-" +
    arr[2] +
    " " +
    arr[3] +
    ":" +
    arr[4] +
    ":" +
    arr[5]
  );
};
const articleInfo = ref({});
const flag = ref(false);
const drawer = ref(false);
const count = ref(0);
const list = ref([]);
const textarea = ref("");
const loginUserInfo = ref({});
const loading = ref(false);
onMounted(async () => {
  loading.value = true;
  loginUserInfo.value = store.state.loginUserInfo;
  await getArt();
  await getAllComments();
  setTimeout(() => {
    loading.value = false;
  }, 1000);
});
const getArt = async () => {
  try {
  let res = await getOneArticle(store.state.articleId);
  articleInfo.value = res.data;
  }
  catch (error) {}
};
const getAllComments = async () => {
  try {
    let res = await getComments(store.state.articleId);
    list.value = res.data;
  } catch (error) {}
};
const support = async () => {
  try {
    let res = await agree(articleInfo.value.id);
    if (res.code == "1") {
      articleInfo.value.support = articleInfo.value.support * 1 + 1;
    }
  } catch (e) {}
};
const onConfirm = async () => {
 
  try {
    await putComments({
      articleId: articleInfo.value.id,
      content: textarea.value,
    });
    getArt();
    getAllComments();
  } catch (e) {}
};
const view = () => {
  store.commit("joinArticleId", articleInfo.value.id);
  store.commit("joinUserId", articleInfo.value.authorId);
  router.push({ path: "/other", query: { type: "ovo" } });
};
const avaClick = (item) => {
  store.commit("joinArticleId", item.articleId);
  store.commit("joinUserId", item.userId);
  router.push({ path: "/other", query: { type: "ava" } });
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  box-sizing: border-box;
  background: white;
  .author {
    text-align: center;
    margin: 20px 0;
    color: gray;
    span {
      margin: 0 15px;
    }
  }
  .bottom {
    position: relative;
    z-index: 10;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 17px 24px;
    height: 64px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    -webkit-box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.06);
    box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.06);
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    color: rgb(153, 154, 170);
    .left {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .right {
      display: flex;
      align-items: center;
    }
  }
  .list {
    display: flex;
    .text {
      margin-left: 10px;
      margin-bottom: 30px;
      & div:nth-child(1) {
        color: #777888;
        margin-bottom: 5px;
      }
      & div:nth-child(2) {
        width: 490px;
        line-height: 30px;
        word-wrap: break-word;
      }
    }
  }
}
.commit {
  display: flex;
  margin-bottom: 30px;
  gap: 10px;
  position: relative;
  .btn {
    position: absolute;
    left: 60px;
    bottom: 10px;
  }
}
::v-deep .el-drawer__header {
  border-bottom: 1px solid #e8e8ed;
  padding-bottom: 20px;
  margin-bottom: 0 !important;
}
::v-deep .ql-container.ql-snow {
  border: none;
  font-size: 20px;
}
</style>